<template>
	<div class="scoreAll" v-loading="loading_checkResult">
		<div class="tableBox">
			<div class="tableMain">
				<table>
					<thead>
						<tr>
							<td colspan="3">抽签结果分析</td>
							<td rowspan="2">分布情况</td>
							<td rowspan="2">得分</td>
						</tr>
						<tr>
							<!--v-if="index < 2"-->
							<!--rowspan="1.5"-->
							<td v-for="(item,index) in limitsList" :key="index" @click="active_limits_index == index ? '':choose_limits(index)"
							 :class="active_limits_index == index ?'active-td-limits':'td-limits'">
								{{item}}</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,itemIndex) in limitsArr[active_limits_index]" :key="itemIndex">
							<td colspan='3'>{{item.limit_string}}</td>
							<td>
								<div style="display: flex; flex-wrap: wrap;margin: 0 15px;">
									<div v-for="(site,siteIndex) in item.detail" style="display: flex;">
										<span v-if="siteIndex != 0">-</span>
										<div :class="site.scrorDecrease ? 'red':''">{{site.site}}</div>
									</div>
								</div>
							</td>
							<!--<td :class="item.score ? 'red':''">{{item.detail|distribution}}</td>-->
							<!--:rowspan="score_height"-->
							<td :rowspan="score_height" v-if="itemIndex==0">{{score < 0 ? 0 : score}}分</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div></div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				loading_checkResult: true,
				tableDistribution: [],
				score: 0,
				limitsArr: [{}, {}, {}],
				// limitsList:['一级单位','二级单位','三级单位'],
				active_limits_index: -1,
				indexs: 0,
				contClass: [],
				type: null,
				count: []
			}
		},
		props: {
			groupId: Number,
			comId: Number,
		},

		// filters:{
		//   distribution(val){
		//     console.log('filters',val)
		//     let result = ''
		//     for(let score in val){
		//       result += score==0 ? val[score]:'-'+val[score]
		//     }
		//     return result
		//   }
		// },
		mounted() {
			console.log(this.groupId)
			console.log(this.comId)
			this.$axios.post('/CheckSignScore/index', {
				group_id: this.groupId,
				com_id: this.comId,
			}, {
				headers: {
					token: window.sessionStorage.getItem('token')
				}
			}).then((res) => {
				if (res.data.code == 200) {
					this.score = res.data.data.score
					this.type = res.data.data.race_info.type
					let distribution_arr = this.calc_distribution_score(res.data.data.rows, res.data.data.score_record)
					// this.limitsArr.one_limitsArr = distribution_arr[0]
					// this.limitsArr.two_limitsArr = distribution_arr[1]
					// this.limitsArr.three_limitsArr = distribution_arr[2]
					console.log(distribution_arr, 'qq')
					console.log(this.limitsArr)
					for (let item in distribution_arr) {
						if (distribution_arr[item]) {
							this.limitsArr[item] = distribution_arr[item]
						} else {
							this.limitsList[item] = '无'
						}
					}
					this.choose_limits(0)
				} else {
					this.$message({
						type: 'error',
						message: '获取签表打分失败'
					})
				}
				setTimeout(() => {
					this.loading_checkResult = false
				}, 500)
			})
		},
		computed: {
			score_height() {
				return this.limitsArr[this.active_limits_index].length ? this.limitsArr[this.active_limits_index].length : 0
			},
			limitsList() {
				let limitsList = [];
				if (this.type == 5) {
					limitsList.push('一级单位')
				} else {
					limitsList.push('一级单位', '二级单位', '三级单位')
				}
				return limitsList
			}
		},
		methods: {
			choose_limits(index) {
				this.active_limits_index = index
				console.log(this.contClass[index])
				console.log(this.limitsArr[index])
				let arr = []
				if (this.type == 5) {
					this.contClass[index] = this.count
				}
				console.log(this.count)
				for (var i = 0; i < this.limitsArr[index].length; i++) {
					for (var j = 0; j < this.limitsArr[index][i].detail.length; j++) {
						arr.push(this.limitsArr[index][i].detail[j].site)
						let site_obj = {}
						site_obj.scrorDecrease = this.check_score_positon(this.limitsArr[index][i].detail[j].site, this.contClass[index])
						this.limitsArr[index][i].detail[j].scrorDecrease = site_obj.scrorDecrease
						// console.log(site_obj)
					}
				}
			},
			calc_distribution_score(distribution, score) {
				console.log(distribution)
				let scoreList = []
				let distribution_score = []
				let firstClass = []
				let secondClass = []
				let thirdClass = []
				let contClass = []
				let count = []
				if (this.type == 5) {
					if (score.length > 0) {
						for (var i = 0; i < score.length; i++) {
							for (let x in score[i].user_data) {
								count.push(`${score[i].user_data[x].second_order+1}/${score[i].user_data[x].site}`)
							}
						}
					}
				}
				this.count = count
				console.log(count)
				for (let index in score) {
					//判断每个阶段标记的值
					if (score[index].score == -2) {
						for (let item in score[index].position) {
							firstClass.push(score[index].position[item])
						}
					}
					if (score[index].score == -3) {
						for (let item in score[index].position) {
							secondClass.push(score[index].position[item])
						}
					}
					if (score[index].score == -5) {
						for (let item in score[index].position) {
							thirdClass.push(score[index].position[item])
						}
					}
					//
					for (let item in score[index].position) {
						scoreList.push(score[index].position[item])
					}
				}
				// console.log(scoreList)

				contClass.push(firstClass, secondClass, thirdClass)
				this.contClass = contClass

				for (let limits in distribution) {
					let limits_arr = []
					for (let item in distribution[limits]) {
						let site_arr = []
						for (let site in distribution[limits][item].detail) {
							let site_obj = {}
							site_obj.site = distribution[limits][item].detail[site]
							site_obj.scrorDecrease = this.check_score_positon(site_obj.site, scoreList)
							// console.log(site_obj.scrorDecrease)
							// console.log(site_obj)
							site_arr.push(site_obj)
						}
						// console.log(site_arr)
						limits_arr.push({
							detail: site_arr,
							limit_string: distribution[limits][item].limit_string
						})
						// console.log(limits_arr)
					}
					distribution_score.push(limits_arr)
				}
				//console.log('result',distribution_score)
				return distribution_score
			},
			check_score_positon(site, scoreList) {
				for (let score in scoreList) {
					if (scoreList[score] == site) {
						return true
					}
				}
				return false
			},
		}
	}
</script>
<style lang="less" scoped>
	.red {
		color: red;
	}

	.scoreAll {
		padding: 20px;

		.basicInfo {
			background: rgba(66, 185, 131, .3);
			border-radius: 2px;
			line-height: 40px;
			height: 40px;
			padding: 15px;
			overflow: hidden;

			span {
				margin-right: 20px;
			}

			.btnGroup {
				height: 60px;
				float: right;
				margin-right: 20px;
			}
		}

		.tableBox {
			margin-top: 20px;
			padding-bottom: 10px;

			.group {
				height: 40px;
				background-color: #F5F7FA;
				border-bottom: #727272;

				li {
					float: left;
					cursor: pointer;
					height: 40px;
					line-height: 40px;
					text-align: center;
					color: #727272;
					padding: 0 10px;
				}

				li:first-child {
					border-right: 1px solid #eaeaea;
					border-bottom: 0;
					background-color: #fff;
					color: #409EFF;
				}

				li:hover {
					color: #409EFF;
				}

				.hasClick {
					background-color: #409EFF;
					color: #fff;
				}
			}

			.tableMain {
				margin-top: 20px;
				padding: 0 20px;

				table {
					width: 100%;
					text-align: center;
					border-collapse: collapse;
					border-left: 1px solid #eaeaea;
					border-top: 1px solid #eaeaea;
					box-shadow: 4px 3px 8px 2px #9999;

					thead {
						tr {
							height: 30px;

							td {
								width: 20%;
								background-color: rgba(66, 185, 131, 0.3);
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
							}

							.td-limits {
								width: 9%;
								background-color: rgba(66, 185, 131, 0.5);
								box-shadow: 1px 1px 3px #888888;
							}

							.td-limits:hover {
								width: 9%;
								transition: .3s;
								background-color: rgba(66, 185, 131, 0.7);
								color: #888888;
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
							}

							.td-limits:active {
								width: 9%;
								transition: .7s;
								background-color: rgba(66, 185, 131, 0.9);
								color: #fff;
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
								box-shadow: 1px 1px 0px #fff;
							}

							.active-td-limits {
								transition: .7s;
								width: 9%;
								background-color: rgba(66, 185, 131, 1);
								color: #fff;
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
							}
						}

						tr:first-child {
							td:first-child {
								width: 60%;
							}

							td:nth-child(2) {
								width: 60%;
							}

							td:nth-child(3) {
								width: 5%;
							}
						}
					}

					tbody {
						tr {
							height: 40px;

							td {
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
								width: 20%;
							}

							td:nth-child(2) {
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
								max-width: 1000px;
								overflow: hidden;
							}

							td:nth-child(3) {
								border-right: 1px solid #eaeaea;
								border-bottom: 1px solid #eaeaea;
								width: 10%;
								font-size: 20px;
								font-weight: bold;
							}
						}
					}
				}

			}
		}

		.btnGroup {
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	}
</style>
